<template>
    <div class="play-state">
        <div class="button" :class="{'hide': isActive}" @click.stop="isActive = !isActive">
            <i class="iconfont icon-shezhi"></i>
        </div>
        <ul :class="{'hide': !isActive}">
            <li @click.stop="changePlayState(0)">
                <i class="iconfont icon-liebiaoxunhuan"></i>
            </li>
            <li @click.stop="changePlayState(1)">
                <i class="iconfont icon-danquxunhuan"></i>
            </li>
            <li @click.stop="changePlayState(2)">
                <i class="iconfont icon-suiji"></i>
            </li>
        </ul>
    </div>
</template>

<script>
    import {mapState} from "vuex";

    const playState = ['list', 'loop', 'random'];
    export default {
        name: "PlayState",
        data() {
            return {
                currentState: 'list',
                isActive: false
            }
        },
        methods: {
            changePlayState(index) {
                this.isActive = false;
                this.currentState = playState[index];
                this.musicPlayer.changePlayState(this.currentState);
            }
        },
        computed: {
            ...mapState({
                musicList: 'musicList',
                musicPlayer: 'musicPlayer'
            })
        }
    }
</script>

<style lang="less" scoped>
    .play-state {
        position: fixed;
        bottom: 10vh;
        left: 10vw;
        z-index: 99;
        .button, & > ul > li {
            width: 44px;
            height: 44px;
            background-color: #07c160;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            position: relative;
            z-index: 0;
        }
        .button {
            transition: all 0.3s;
            transform-origin: center center;
            &.hide {
                transform: rotate(90deg);
            }
        }
        & > ul {
            position: absolute;
            top: 0;
            z-index: -1;
            & > li {
                background-color: #1989fa;
                position: absolute;
                transition: all 0.3s;
                &:nth-child(1) {
                    top: -162px;
                }
                &:nth-child(2) {
                    top: -108px;
                }
                &:nth-child(3) {
                    top: -54px;
                }
            }

            &.hide {
                position: absolute;
                top: 0;
                left: 0;
                & > li {
                    position: absolute;
                    top: 0;
                }
            }
        }
    }
</style>
